<template>
    <div>
        <h2>Ajax 请求数据</h2>
        <h2>msg -- {{msg}}</h2>
        <div>
            <p>展示留言</p>
            <div v-for="(l,i) in list" :key='i'>
                <p>楼层:{{i+1}}</p>
                <p>标题:{{l.title}}</p>
                <p>内容:{{l.content}}</p>
                <p>操作:<button @click="deleteOne(l,i)">删除</button><button @click="updataOne(l,i)">修改</button></p>
            </div>
        </div>
        
        <div>
            <p>添加留言</p>
            <p><input type="text" placeholder="标题" v-model="form.title"></p>
            <p><input type="text" placeholder="内容" v-model="form.content"></p>
            <button @click="addTodata">提交</button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"Vue is so easy",
            form:{},
            list:[]
        }
    },
    created(){
        this.getList()
    },
    methods:{
        // 更新留言
        updataOne(l,i){
            let value = window.prompt(l.title,l.content)
            if(value && value !=l.content){
                $.ajax({
                    url:"http://localhost:2116/list/"+l.id,
                    type:"PATCH",
                    data:{
                        content:value
                    },
                    success:res=>{
                        l.content=value;
                        this.list.splice(i,1,l)
                    }
                })
            }
        },
        //删除留言
        deleteOne(l,i){
            $.ajax({
                url:"http://localhost:2116/list/"+l.id,
                type:"DELETE",
                success:res=>{
                    this.list.splice(i,1)
                }
            })
        },
        getList(){
            $.ajax({
                url:"http://localhost:2116/list",
                type:"GET",
                success:res=>{
                    this.list=res;
                    this.getList()
                }
            })
        },
        addTodata(){
            // POST请求提交
            if(this.form.title && this.form.content){
                $.ajax({
                    url:"http://localhost:2116/list",
                    type:"POST",
                    data:this.form,
                    success:res=>{
                        this.form={}
                    }
                })
            }else{
                alert("留言不可以为空")
            }
        }
    },
    mounted(){
        // GET请求查询

        // 方法一
        // $.ajax({
        //     url:"http://localhost:2116/msg",
        //     type:"GET",
        //     success:res=>{
        //         console.log(res)
        //         this.msg=res[0]
        //     }
        // })

        // 方法二
        $.get("http://localhost:2116/msg").then(res=>{
            this.msg=res[0]
        },err=>{
            console.log(err)
        })
    }
}
</script>